<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dish</title>
<link href="${pageContext.request.contextPath }/css/bootstrap.min.css"
	rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/css/index.css"
	rel="stylesheet" type="text/css" />

<link href="${pageContext.request.contextPath }/css/cart-styles.css"
	rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/font-awesome.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/menu-style.css">
</head>
<body>
	<div class="contain">
		<c:import url="header.jsp"></c:import>
		<c:import url="menu.jsp"></c:import>
		
		<div class="container">
			<div class="row col-md-12 content">
				<c:forEach var="d" items="${merchant.dishs }">
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail" id="${d.dId}">
							<img src="${pageContext.request.contextPath }/${d.img }"
								alt="...">
							<div class="caption">
								<h3>${d.dName }</h3>
								<p class="price">
									$<span>${d.price} </span>
								</p>
								<p>
									<button class="btn btn-danger buy-btn" role="button"
										onclick="dish('${merchant.mId}', '${d.dId}', 'add')">Buy</button>
								</p>
							</div>
						</div>
					</div>
				</c:forEach>
			</div>
				<div id="cartNav" href="">
		<i class="fa"></i>
	</div>
	<nav class="navbar-cart" role="navigation">
	<div class="cart-head">
		<h2>Shopping Cart</h2>
	</div>
	<div class="cart-dishes">
		<table class="table table-hover" id="cart-table">
			<c:forEach var="cart" items="${cartList}">
				<tr class="dish" id="cart${cart.dId}">
					<td class="dish-img">
						<div>
							<img src="${pageContext.request.contextPath }/${cart.img}">
						</div>
					</td>
					<td class="dish-info">
						<p>${cart.dName}</p>
						<p>
							$<span class="dish-price">${cart.price} </span>
						</p>
					</td>
					<td class="dish-count"><span class="mines"
						onclick="dish('${merchant.mId}', '${cart.dId}', 'sub')">-</span> <input
						class="counts" value="${cart.count}"
						onkeyup="update('${merchant.mId}', '${cart.dId}', this.value)">
						<span class="plus"
						onclick="dish('${merchant.mId}', '${cart.dId}', 'add')">+</span></td>
				</tr>
				<c:set value="${sum + cart.price * cart.count}" var="sum" />
			</c:forEach>
		</table>
		<hr>
		<div class="checkout">
			<div class="total">Total: ${sum}$</div>
			<div class="pay">
				<a style="text-decoration: none; color: #D64B2A"
					href="${pageContext.request.contextPath }/confirmOrder/${merchant.mId}">Check
					Out</a>
			</div>
		</div>
	</div>
	</nav>
		</div>
		<!--container end-->
		
		
	</div>
	<!--contain end-->

	<!--cart-->

	<div class="footer"></div>
	<!--footer end-->
</body>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/cart.js"></script>

<script src='${pageContext.request.contextPath }/js/TweenMax.min.js'></script>
<script src="${pageContext.request.contextPath }/js/menu-script.js"></script>
</html>